<template>
  <view
    class="tn-subsection"
    :style="subsectionStyle"
  >
    <!-- item -->
    <view 
      v-for="(item, index) in data"
      :key="index"
      class="tn-subsection__item"
      :class="[subsectionItemClass(index)]"
      :style="subsectionItemStyle(index)"
      @tap.stop="handleItemClick(index)"
    >
      <view class="content" :class="[subsectionItemContentClass(index)]" :style="subsectionItemContentStyle(index)">
        {{ item.name }}
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { subsectionProps, subsectionEmits, SubSectionData } from '../../../types/tn-subsection'
import { computed, CSSProperties } from 'vue'
import { ColorInfo } from '../../../types/tuniao-ui'
import useComponentColor from '../../../libs/hooks/useComponentColor'
import { handleValueWithUnit } from '../../../utils'
import { UPDATE_MODEL_EVENT } from '../../../constants'

const props = defineProps(subsectionProps)
const emits = defineEmits(subsectionEmits)

// 解析颜色
const { splitColorInfo } = useComponentColor()

// 解析激活时颜色
const activeColor = computed<ColorInfo>(() => {
  return splitColorInfo('bg', props?.activeColor || '')
})

// 分段器item数据
const data = computed<SubSectionData[]>(() => {
  return props.data || []
})

// subsection样式
const subsectionStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}
  if (props?.height) style.height = handleValueWithUnit(props.height)
  if (props.borderRadius) style.borderRadius = handleValueWithUnit(props.borderRadius)
  return style
})
// subsectionItem样式
const subsectionItemStyle = computed<(index: number) => CSSProperties>(() => {
  return (index: number) => {
    let style: CSSProperties = {}
    if (activeColor.value.type === 'style') {
      style.borderColor = activeColor.value.value
    }
    if (props.borderRadius) {
      const borderRadius = handleValueWithUnit(props.borderRadius)
      if (index === 0) style.borderRadius = `${borderRadius} 0rpx 0rpx ${borderRadius}`
      if (index === data.value.length - 1) style.borderRadius = `0rpx ${borderRadius} ${borderRadius} 0rpx`
    }
    return style
  }
})
// subsectionItemContent样式
const subsectionItemContentStyle = computed<(index: number) => CSSProperties>(() => {
  return (index: number) => {
    let style: CSSProperties = {}
    if (activeColor.value.type === 'style') {
      if (index === props.modelValue) {
        style.backgroundColor = activeColor.value.value
      } else {
        style.color = activeColor.value.value
      }
    }
    return style
  }
})

// subsectionItem对应的类
const subsectionItemClass = computed<(index: number) => string>(() => {
  return (index: number) => {
    let clazz: string[] = []
    if (index === props.modelValue){
      clazz.push('active')
    }
    if (activeColor.value.type === 'class') {
      clazz.push(activeColor.value.value.replace('bg', 'border'))
      clazz.push(activeColor.value.value.replace('bg', 'color'))
    }
    if (data.value[index]?.disabled) clazz.push('disabled')
    return clazz.join(' ')
  }
})
// subsectionItemContent对应的类
const subsectionItemContentClass = computed<(index: number) => string>(() => {
  return (index: number) => {
    let clazz: string[] = []
    if (index === props.modelValue){
      if (activeColor.value.type === 'class') clazz.push(activeColor.value.value)
    }
    return clazz.join(' ')
  }
})

// 处理item点击事件
const handleItemClick = (index: number) => {
  if (data.value[index]?.disabled) return
  emits(UPDATE_MODEL_EVENT, index)
  emits('change', index)
}
</script>

<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true
  }
}
</script>

<style lang="scss" scoped>

@import '../../../theme.scss';

.tn-subsection {
  position: relative;
  width: 100%;
  height: 56rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-around;
  border-radius: 10rpx;
  overflow: hidden;

  &__item {
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2rpx solid $tn-main-color;
    border-left-width: 0rpx;
    color: $tn-main-color;
    border-radius: 0rpx;
    // box-sizing: content-box;
    &:first-child {
      border-left-width: 2rpx;
      border-radius: 10rpx 0rpx 0rpx 10rpx;
    }
    &:last-child {
      border-radius: 0rpx 10rpx 10rpx 0rpx;
    }

    .content {
      width: 100%;
      height: 100%;
      background-color: inherit;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: transparent;
      transition: all 0.25s ease;
    }

    &.active {
      .content {
        color: #FFFFFF;
        background-color: $tn-main-color;
      }
    }
    &.disabled {
      .content {
        opacity: 0.3;
      }
    }
  }
}
</style>
